{{ define "js" }}
  <script type="text/javascript" src="/js/datatables.min.js"></script>
  <script type="text/javascript" src="/js/datatable_input.js"></script>
  <script type="text/javascript" src="/js/datatable_loader.js"></script>
  <script>
    $(document).ready(function () {
      $("#epochs").DataTable({
        searchDelay: 0,
        processing: true,
        serverSide: true,
        ordering: false,
        searching: true,
        ajax: dataTableLoader("/epochs/data"),
        pagingType: "input",
        stateSave: true,
        stateSaveCallback: function (settings, data) {
          data.order = []
          fetch(`/tables/${settings.sTableId}/state`, {
            method: "PUT",
            body: JSON.stringify(data),
          })
            .then((res) => res.json())
            .then(({ status, data }) => {
              if (status !== "OK") {
                console.error("error updating table state, err:", data, "status: ", status)
              }
              if (data !== "") {
                localStorage.setItem("DataTables_" + settings.sInstance, JSON.stringify(data))
              } else {
                localStorage.removeItem("DataTables_" + settings.sInstance)
              }
            })
            .catch((err) => {
              console.error("error updating table state, err: ", err)
            })
        },
        stateLoadCallback: function (settings, callback) {
          fetch(`/tables/${settings.sTableId}/state`, {
            method: "GET",
          })
            .then((res) => res.json())
            .then(({ status, data }) => {
              if (status !== "OK") {
                console.error("error loading table state, err:", data, "status: ", status)
              }
              var response = data !== "" ? data : JSON.parse(localStorage.getItem("DataTables_" + settings.sInstance))
              callback(response)
            })
            .catch((err) => {
              console.error("error loading table state, err: ", err)
            })
        },
        pageLength: 50,
        language: {
          searchPlaceholder: "Search by Epoch Number",
          search: "",
          paginate: {
            previous: '<i class="fas fa-chevron-left"></i>',
            next: '<i class="fas fa-chevron-right"></i>',
          },
        },
        preDrawCallback: function () {
          // this does not always work.. not sure how to solve the staying tooltip
          try {
            $("#epochs").find('[data-toggle="tooltip"]').tooltip("dispose")
          } catch (e) {
            console.error(e)
          }
          document.getElementById("header-placeholder").style.display = "none"
          document.getElementById("footer-placeholder").style.display = "none"
        },
        drawCallback: function (settings) {
          formatTimestamps()
        },
      })
      // $("div.toolbar").html("<b>Custom tool bar! Text/images etc.</b>")
    })
  </script>
{{ end }}
{{ define "css" }}
  <link rel="stylesheet" type="text/css" href="/css/datatables.min.css" />
{{ end }}
{{ define "content" }}
  <div class="container mt-2">
    <div class="d-md-flex py-2 justify-content-md-between">
      <h1 class="h4 mb-1 mb-md-0"><i class="fas fa-history mr-2"></i>Epochs</h1>
      <nav aria-label="breadcrumb">
        <ol class="breadcrumb font-size-1 mb-0" style="padding:0; background-color:transparent;">
          <li class="breadcrumb-item"><a href="/" title="Home">Home</a></li>
          <li class="breadcrumb-item active" aria-current="page">Epochs</li>
        </ol>
      </nav>
    </div>
    <div id="r-banner" info="{{ .Meta.Templates }}"></div>
    <div class="card mt-2">
      <div id="header-placeholder" style="height:45px;"></div>
      <div class="card-body px-0 py-3">
        <div class="table-responsive px-0 py-1">
          <table class="table" id="epochs">
            <thead>
              <tr>
                <th>Epoch</th>
                <th style="min-width: 125px">Time</th>
                <th>Attestations</th>
                <th>
                  <span data-toggle="tooltip" data-placement="top" title="Deposits">D<span class="d-none d-xl-inline">eposits</span> <i class="d-xl-none far fa-arrow-alt-circle-down"></i></span> / <span data-toggle="tooltip" data-placement="top" title="Withdrawals">W<span class="d-none d-lg-inline">ithdrawals</span> <i class="d-lg-none far fa-arrow-alt-circle-up"></i></span>
                </th>
                <th>Slashings <span data-toggle="tooltip" data-placement="top" title="Proposers">P</span> / <span data-toggle="tooltip" data-placement="top" title="Attesters">A</span></th>
                <th>Finalized</th>
                <th>Eligible</th>
                <th>Voted</th>
              </tr>
            </thead>
            <tbody></tbody>
          </table>
        </div>
      </div>
      <div id="footer-placeholder" style="height:71px;"></div>
    </div>
  </div>
{{ end }}
